import { Form, Input, Button, Checkbox, message } from 'antd';
import { LoginStyle } from "./style"
import { login } from "../../model/loginModel"
import { setStorage, getStorage } from "../../utils/LocalStorage"
import { useDispatch } from "react-redux"
import { useState } from "react"
import BackgroundPic from "../../assets/images/backgroundPic.gif"
const layout = {
    labelCol: {
        span: 13,
    },
    wrapperCol: {
        span: 8,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 13,
        span: 16,
    },
};


const Login = (props) => {

    const [username, setUsername] = useState(() => { return getStorage("username") || "" })

    const dispatch = useDispatch()

    // const userinfo = useSelector(state => state.getIn(["login"]))

    //账号验证规则
    const usernameRules = [
        {
            required: true,
            message: "请输入账号",
        },
        {
            min: 3,
            message: "长度不能小于三"
        },
        {
            pattern: /[^user]/i,
            message: "屏蔽字账户"
        },
        {
            validator: (rule, value) => {
                if (value === "2") {
                    return Promise.reject(new Error("单值为2"))
                } else {
                    return Promise.resolve()
                }
            }
        }
    ]
    //密码验证规则
    const passwordRules = [
        {
            required: true,
            message: '密码必须填写',
        },
    ]

    const onFinish = async (values) => {
        let data = await login()      
        data = data.data.data[0];
        if (values.username === data.username && values.password === data.password) {
            setStorage("token", data.token)
            if (values.remember) {
                setStorage("username", data.username)
                setStorage("phonenumber", data.phonenumber)
                setUsername(data.username)

            }
            message.success("登陆成功，正在为您跳转", 3).then(() => {
                props.history.push("/home")
            })
            // 把用户数据发送到redux中
            dispatch({
                type: 'login',
                data
            })
        } else {
            message.error("登陆失败")
        }
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <LoginStyle>
            <div className="loginArea">
                <div className="logo"><img src={BackgroundPic} alt="" /></div>
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{
                        remember: false,
                        username
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="账号"
                        name="username"
                        rules={usernameRules}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={passwordRules}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            提交
                </Button>
                    </Form.Item>
                </Form>
            </div>
            <div className="title">电商后台管理系统</div>
        </LoginStyle>
    );
};

export default Login;
